<template>
    <div class="mv" style="margin-top: 40px;">
        <el-divider content-position="left">
            <span style="font-weight: 600;">推荐MV</span>
        </el-divider>
        <div class="mv_container">
            <div class="mv_item" v-for="item in mvs">
                <!-- <img :src="item.cover" alt=""> -->
                <el-image :src="item.cover" lazy />
                <h1>{{ item.name }}</h1>
                <h1>by {{ item.artistName }}</h1>
                <i class="iconfont icon-erji">{{ formatPlayCount(item.playCount) }}</i>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue"
import type {MvResData2 } from "@/models/discover"
import { formatPlayCount } from "@/utils/formatPlayCount.ts"
import { GetMvInfo } from '@/api/api.ts';
const mvs = ref<MvResData2>([])
onMounted(() => {
    getMv()
})
const getMv = async () => {
    await GetMvInfo().then(res => {
        mvs.value = res.data.data
    })

}

</script>
<style lang="scss" scoped>
.mv_container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 6列，每列平均分配空间 */
    grid-template-rows: auto;
    /* 2行，高度根据内容自动调整 */
    gap: 10px;
    /* 格子之间的间隔 */

}

.mv_item {
    position: relative;
    padding: 10px;
    transition: transform 0.3s ease;
    cursor: pointer;
    height: 180px;

    .el-image {
        border-radius: 8px;
        height: 100%;
        width: 100%;
        margin-bottom: 5px;
    }

    h1 {
        font-size: 12px;
    }

    .icon-erji {
        font-size: 12px;
        color: white;
        position: absolute;
        top: 10px;
        right: 10px;
    }

}

.mv_item:hover {
    transform: scale(1.07);
    /* 移入时放大图像 */
}
</style>
